<script setup lang="ts">
import type { Link, VueFlowNode } from '@/views/Square/LearningSquare/SkillTree/details/Components/VueFlow.vue';
import { ref } from 'vue';

const props = defineProps<{
  node: VueFlowNode;
}>();

const innerLinks = ref<Link[]>([]);
const publicLinks = ref<Link[]>([]);

const initLinks = (node: VueFlowNode) => {
  // 如果以/开头，则认为是内部链接，否则认为是外部链接
  innerLinks.value = node.data.links.filter((link: Link) => link.url.startsWith('/'));
  publicLinks.value = node.data.links.filter((link: Link) => !link.url.startsWith('/'));
};

initLinks(props.node);
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 0.5rem;">
    <p style="font-size: 1.2rem; font-weight: bold; text-align: center; margin: 0; margin-top: 1rem;">
      {{ node.data.label }}
    </p>
    <hr style="margin: 0.5rem 0.5rem;">

    <div v-if="innerLinks.length > 0">
      <p style="font-size: 1.2rem; font-weight: bold; text-align: center; margin: 0;">
        内部资源
      </p>
      <a-list :data-source="innerLinks">
        <template #renderItem="{ item }">
          <a-list-item style="display: flex; flex-direction: row;">
            <div style="width: 25%; display: flex; justify-content: center;">
              <a-tag color="blue" style="width: 100%; text-align: justify; text-align-last: justify;">
                {{ item.type }}
              </a-tag>
            </div>
            <div style="width: 75%; text-align: left;">
              <a :href="item.url" target="_blank">{{ item.title }}</a>
            </div>
          </a-list-item>
        </template>
      </a-list>
      <hr style="margin: 0.5rem 0.5rem;">
    </div>

    <div v-if="publicLinks.length > 0">
      <p style="font-size: 1.2rem; font-weight: bold; text-align: center; margin: 0;">
        公共资源
      </p>
      <a-list :data-source="publicLinks">
        <template #renderItem="{ item }">
          <a-list-item style="display: flex; flex-direction: row;">
            <div style="width: 25%; display: flex; justify-content: center;">
              <a-tag color="blue" style="width: 100%; text-align: justify; text-align-last: justify;">
                {{ item.type }}
              </a-tag>
            </div>
            <div style="width: 75%; text-align: left;">
              <a :href="item.url" target="_blank">{{ item.title }}</a>
            </div>
          </a-list-item>
        </template>
      </a-list>
    </div>

    <a-empty v-if="innerLinks.length === 0 && publicLinks.length === 0">
      <template #description>
        暂无资源
      </template>
    </a-empty>
  </div>

  <!-- <hr style="margin: 0.5rem 0.5rem;">

  <div style="text-align: center; margin: 0rem 0.5rem; display: flex; flex-direction: column; gap: 0.5rem;">
    <a-button type="primary" style="width: 100%;" shape="round">
      添加资源
    </a-button>
    <a-button type="primary" style="width: 100%;" shape="round">
      添加分支
    </a-button>
    <a-button danger style="width: 100%;" shape="round">
      删除节点
    </a-button>
  </div> -->
</template>

<style scoped>

</style>
